<template>
  <div id="app">


    <el-form label-width="120px" style="margin-top: 20px" :inline="true">

      <div style="margin-left:40px;margin-bottom: 10px" >
        <el-button type="primary" icon="el-icon-search" @click="findTransports(currentPage,pageSize)">搜索</el-button>
        <el-button>重置</el-button>
      </div>

      <el-form-item label="计划单号：">
        <el-input placeholder="请输入计划单号"
        v-model="tOrderId"
        ></el-input>
      </el-form-item>

    </el-form>

    <el-divider></el-divider>
    <div style="margin-left:40px">
      <el-button type="success"  icon="el-icon-refresh">刷新</el-button>
    </div>


    <el-table
      :data="transports"
      ref="arr"
      tooltip-effect="dark"
      style="width: 100%;margin-left: 40px"
      @selection-change="">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="tOrderId"
        label="计划单号">
      </el-table-column>

      <el-table-column
        prop="need.route"
        label="路线 "
        width="200px"
      >
      </el-table-column>

      <el-table-column
        prop="need.cName"
        label="客户名称" >
      </el-table-column>

      <el-table-column
        prop="need.cTime"
        label="创建时间"
        format='yyyy-MM-dd-HH-mm-ss'
        width="200px"
      >
      </el-table-column>

      <el-table-column
        prop="need.gNumber"
        label="总数量(个)">
      </el-table-column>

      <el-table-column
        prop="need.gWeight"
        label="总重量(千克)">
      </el-table-column>

      <el-table-column
        prop="need.gVolume"
        label="总体积(方)">
      </el-table-column>

      <el-table-column
        prop="operate"
        label="操作"
        width="300px"
      >
        <template slot-scope="scope">
          <el-button @click="showDetail(scope.row)" type="danger" size="small">查看</el-button>
          <el-button @click="OnSubmit(scope.$index)" type="danger" size="small">生成</el-button>
          <el-button @click="rollback(scope.$index)" type="danger" size="small">驳回</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!--修改对话框-->
    <el-dialog
      title="提示"
      :visible.sync="editDialogVisible"
      width="600px"
      :before-close="handleClose">
      <div>

        <el-form :model="transport" label-width="150px">
          <el-form-item label="需求单号">
            <el-input  style="width: 300px" v-model="transport.vOrderId" disabled></el-input>
          </el-form-item>

          <el-form-item label="承运商名称">
            <el-input style="width: 300px" v-model="transport.carrierName" disabled></el-input>
          </el-form-item>

          <el-form-item label="司机名称">
            <el-input style="width: 300px" v-model="transport.driverName" disabled></el-input>
          </el-form-item>

          <el-form-item label="车牌号码">
            <el-input style="width: 300px" v-model="transport.carPlate" disabled></el-input>
          </el-form-item>

        </el-form>

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage:1,
        pageSizes:[2,4,6],
        pageSize:2,
        total:0,
        transports:[],
        transport:{},
        tOrderId:'',
        editDialogVisible:false,
      }
    },
    methods: {
      handleClose(){
        this.editDialogVisible = false;
      },
      //点击查看详细
      showDetail(row){
        console.log(row)
        this.transport = row;
        this.editDialogVisible = true;
      },
      // 搜索操作
      findTransports(currentPage,pageSize){
        this.$http({
          method:"GET",
          url:"http://localhost/transport/page",
          params:{
            currentPage:currentPage,
            pageSize:pageSize,
            tOrderId:this.tOrderId
          }
        }).then(resp=>{
          console.log('transports = ',resp.data.data);
          this.transports = resp.data.data.list;
          this.total = resp.data.data.total;
        })
      },

      OnSubmit(index){
        let transport = this.transports[index]
        console.log(transport)

        this.$http.post('http://localhost/transport/create',transport)
          .then(resp=>{
            if (resp.data.code === 100000){
              this.$message({
                message: '提交成功',
                type: 'success'
              });

              this.findTransports(1,2);

            }else{
              this.$message({
                message: '提交失败',
                type: 'error'
              });
            }
          })
      },

      rollback(index){
        let transport = this.transports[index]
        // 修改 vehicle   状态1 改为 0
        //  7d35c610 通过计划单号找到 整车派车单号 528e6d02 通过整车派车单号 找到 整车信息 进行修改操作
        // 修改 transport 删除 操作  通过 7d35c610

        let tOrderId = transport.tOrderId;

        this.$http.post(`http://localhost/transport/delete/${tOrderId}`)
          .then(resp=>{
            if (resp.data.code === 100000){
              this.$message({
                message: '提交成功',
                type: 'success'
              });

              this.findTransports(1,2);

            }else{
              this.$message({
                message: '提交失败',
                type: 'error'
              });
            }
          })

      },
      handleSizeChange(val){
        this.pageSize = val;
        this.findTransports(this.currentPage,this.pageSize);
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.findTransports(this.currentPage,this.pageSize);
      }

    },
    created() {
      this.findTransports(1,2);
    },
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

  .div1{
    margin-left:40px;
    border-bottom: 1px;
  }

</style>
